<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="item-title">
        <el-tabs v-model="tabLine" type="card">
          <el-tab-pane label="学生预约查询" name="1"></el-tab-pane>
          <el-tab-pane label="区角预约查询" name="2"></el-tab-pane>
        </el-tabs>
<!--        <ul class="tab-base">-->
<!--          <li :class="tabLine == 1 ? 'activeLi' : ''" @click="tabFn(1)">-->
<!--            学生预约查询-->
<!--          </li>-->
<!--          <li :class="tabLine == 2 ? 'activeLi' : ''" @click="tabFn(2)">-->
<!--            区角预约查询-->
<!--          </li>-->
<!--        </ul>-->
<!--        <div class="subject">-->
<!--          <h5>本预约查询只适用老师身份查询，区角负责人进入区角列表查询学生预约</h5>-->
<!--        </div>-->
      </div>
      <cornerstudent v-show="Number(tabLine)==1"></cornerstudent>
      <cornerqurey v-show="Number(tabLine)==2"></cornerqurey>
    </div>
  </div>
</template>

<script>
import cornerstudent from './student.vue'
import cornerqurey from './corner.vue'

export default {
  components: {
    cornerqurey,
    cornerstudent
  },
  data () {
    return {
      tabLine: '1'
    }
  },
  created () {
  },
  methods: {
    tabFn (option) {
      this.tabLine = option
    }
  },
  mounted () {
  }
  // 缓存机制 end
}
</script>
<style scoped>
.item-title .subject {
  display: inline-block;
}

.tab-base {
  vertical-align: top;
  display: inline-block;
  /*margin-left: 20px;*/
  /*padding-left: 20px;*/
  /*border-left: 1px dashed #a7a7a7;*/
}

.tab-base li.activeLi {
  background-color: #148eff;
  color: #fff;
  font-weight: bold;
}

.tab-base li {
  margin-right: 12px;
  vertical-align: top;
  display: inline-block !important;
  color: #333;
  padding: 0 18px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
  background-color: #f3f4f4;
  cursor: pointer;
}
</style>
